<template>
	<view class="page_bg">
		<view class="padd32">
			<view class="cr-333 font_s40 mar-top32 font_w500">
				{{info.title}}
			</view>
			<view class="flex justify-between font_s24 cr-999 line-height100 mar-top23">
				<view class="">
					{{info.createTime}}
				</view>
				<view @click="clickCollection">
					<image v-if="!info.collectionStatus" src="https://www.worldintek.com:39011/yaolexue-service/icon_start.png" class="w-29 h-28"></image>
					<image v-else src="https://www.worldintek.com:39011/yaolexue-service/icon_start_active.png" class="w-29 h-28"></image>
				</view>
			</view>
			<view class="flex justify-between mar-top29">
				<view class="ll-box flex align-center">
					<view class="font_s28 cr-333">
						浏览 
						<text class="mar-left35">{{info.clickNumber}}</text>
					</view>
				</view>
				<view class="ll-box flex justify-between align-center">
					<view class="font_s28 cr-333">
						点赞 
						<text class="mar-left35">{{info.likeNumber}}</text>
					</view>
					<view @click="clickLike">
						<image :src="!info.likeStatus ? 'https://www.worldintek.com:39011/yaolexue-service/icon_zan.png' : 'https://www.worldintek.com:39011/yaolexue-service/icon_zan_active.png'" class="w-26 h-26"></image>
					</view>
				</view>
			</view>
			<view class="mar-top41">
				<u-parse :content="info.contentText" class="font_s26 cr-333" style="line-height: 48rpx;"></u-parse>
			</view>			
		</view>
		<t-favoritespop :show='showFavoritesPopup' :faChild='{id}'
			@close='()=>{handleShowFaPopup(false);getInfo()}'></t-favoritespop>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				info:{
					title:'',
					contentText:'',
					clickNumber:0,
					likeNumber:0
				},
				showFavoritesPopup:false
			};
		},
		onLoad(options) {
			this.id = options.id
			this.getInfo()
		},
		onShareAppMessage(res) {
			this.$postShareHttp(this.id)
		    return {
		      title: this.info.title,
		      path: `/pages/imgtxtDetails/imgtxtDetails?id=${this.id}`
		    }
		},
		methods:{
			getInfo(){
				this.$http.get(`/yaolexue-service-portal/contentItem/contentImageTextInfo/${this.id}`,{
					
				}).then(res => {
					this.info = res.data
				})
			},
			clickCollection(){
				if(this.info.collectionStatus===0){
						this.handleShowFaPopup(true)
				}else{
					this.handleUpdateContentCollectionStatus()
				}
			},
			handleUpdateContentCollectionStatus(){
				let status = this.info.collectionStatus == 0 ? 1 : 0
				this.$http.put(`/yaolexue-service-portal/contentItem/updateContentCollectionStatus`,{
					collectionStatus:status,
					contentItemId:this.id
				}).then(res => {
					if(res.code == 200){
						this.info.collectionStatus = status
					}else{
						uni.showToast({
							icon:'none',
							title:res.message
						})
					}
				})
			},
			clickLike(){
				let status = 1-this.info.likeStatus
				this.$http.put('/yaolexue-service-portal/contentItem/updateContentLikeStatus',{
					contentItemId:this.id,
					likeStatus:status
				}).then(res => {
					if(res.code == 200){
						this.info.likeStatus = status
					this.info.likeNumber = status ? ++this.info.likeNumber : --this.info.likeNumber
					}else{
						uni.showToast({
							icon:'none',
							title:res.message
						})
					}
				})
			},
			handleShowFaPopup(flag) {
				this.showFavoritesPopup = flag;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.ll-box{
		width: 327rpx;
		height: 52rpx;
		background: #D7D7D7;
		padding: 0 20rpx;
	}
</style>
